<template>
  <div>
    <el-dialog title='添加走访' :visible.sync="Visit" @close="close">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="企业名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="走访人员">
              <el-select filterable v-model="form.Visitpeople" multiple placeholder="">
                <el-option v-for="item in Visitpeoplelist" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="Visitdate" label="走访时间">
              <el-col>
                <el-date-picker type="datetime" placeholder="" v-model="form.time" value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%;">
                </el-date-picker>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="企业标签">
          <div>
            <el-tag closable @close="addLabel(item)" v-for="item in form.enterprise" :key="item" class="b_bule">{{ item }}</el-tag>
          </div>
          <el-button class="button_from_i" type="primary" round @click="addEnterprise">{{ choose ? '隐藏标签 -' : '添加标签 +' }}
          </el-button>
          <div v-if="choose">
            <div>请选择下列标签：</div>
            <span v-for="item in labelList" :key="item" :class="{ b_bule: form.enterprise.indexOf(item) > -1 }"
              class="addLabel b_choose" @click="addLabel(item)">{{ item }}</span>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="preservation">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      choose: false,
      Visit: false,
      Visitpeoplelist: ['毛泽东', '江泽民'],
      form: {
        name: '',
        time: '',
        Visitpeople: '',
        enterprise: []
      },
      labelList: ['高新企业', '国家示范企业', '街道重点关注企业', '国家优势企业', '测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7', '测试8', '测试9', '测试10'],
    };
  },
  watch: {
    addVisit() {
      this.Visit = this.addVisit
      // console.log(this.addVisit)
    },
    add_form: {
      handler(newVal, oldVal) {
        this.form = newVal
      },
      immediate: true,
      deep: true,
    }
  },
  props: {
    addVisit: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    add_form: {
      type: Object,
      default: () => {
        return {
          name: '',
          time: '',
          Visitpeople: '',
          enterprise: []
        };
      }
    },
  },
  components: {},
  mounted() {
  },
  methods: {
    //关闭弹窗
    close() {
      this.$emit('close');
    },
    //保存
    preservation() {
      // console.log(this.form)
      this.$emit('preservation', this.form);
    },

    addEnterprise() {
      this.choose = !this.choose
    },
    addLabel(item) {
      let index = this.form.enterprise.indexOf(item)
      if (index == -1) {
        this.form.enterprise.push(item)
      } else {
        this.form.enterprise.splice(index, 1)
      }
    }
  },
};
</script>

<style scoped lang="less">
.button_from_i {
  min-width: 125px;
  height: 38px;
  line-height: 0px;
  font-size: 14px;
  color: #3377FF;
  background-color: #ebf2ff;
  border: 1px solid #387DFF;
}

.dialog-footer {
  button {
    padding: 5px 30px;
    width: 139px;
    height: 38px;
    background: #387DFF;
    border: 1px solid #E8ECEF;
    border-radius: 19px;
    font-size: 14px;
  }
}

.b_bule {
  /*display: inline-block;*/
  background-color: #D3E2FF !important;
  margin: 3px 5px;
  border-radius: 5px;
  padding: 0px 10px;
  color: #387DFF;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  border: none !important;
}

.b_choose {
  display: inline-block;
  background-color: #ffffff;
  margin: 3px 5px;
  border-radius: 5px;
  padding: 0px 10px;
  color: #387DFF;
  font-size: 12px;
  height: 22px;
  line-height: 20px;
  border: 1px solid #387DFF;
  cursor: pointer;
}

::v-deep .el-table__row td:nth-child(6) .el-button {
  color: #23B899;
  background-color: #ecfaf7;
  border: none;
  font-size: 14px;
}

::v-deep input {
  border-radius: 38px;
  height: 38px;
  line-height: 38px;
}

::v-deep .el-input__icon {
  line-height: 38px;
  font-size: 16px;
}



.Visitdate {
  margin-top: 62px;
}

::v-deep .el-table__row td:nth-child(7) .el-button {
  color: #23B899;
  background-color: #ecfaf7;
  border: none;
}


::v-deep .el-dialog {
  border-radius: 10px;
}

::v-deep .el-dialog__header {
  .el-dialog__title {
    font-size: 22px;
    font-weight: bolder;
  }

  .el-dialog__headerbtn {
    i {
      position: absolute;
      border: 3px solid #fff;
      top: -50px;
      left: 30px;
      color: #fff;
      border-radius: 30px;
      font-size: 24px;
      font-weight: bolder;
    }
  }
}

::v-deep .el-form-item {
  .el-form-item__label {
    font-size: 14px;
    font-weight: initial;
  }

  .el-form-item__content {
    .el-input__inner {
      border-radius: 5px;
    }
  }
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
